* {
    box-sizing: border-box;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

/* Input (EditText) */
.mdInput { 
    position: relative; 
    margin: 1.5em 0.5em 1em; 
}
.mdInput > input {
    display: block;
    width: 100%;
    padding: 0.6em 0.6em 0.6em 0.3em;
    border: none;
    border-bottom: 1px solid #757575;
    background: transparent;
    font-size: 1em;
}
.mdInput > input:focus {
    outline: none;
}

.mdInput > label {
    color: #9E9E9E;
    font-size: 1em;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0.3em;
    top: 0.6em;
    transition: 0.2s ease all;
}
.mdInput > input:focus ~ label,
.mdInput > input:valid ~ label {
    top: -1em;
    font-size: 0.75em;
    color: #01579B;
}
.mdInputDate > label {
    top: -1em;
    font-size: 0.9em;
}
.mdInputBar {
    position: relative;
    display: block;
    width: 100%;
}
.mdInputBar:before,
.mdInputBar:after {
    content: '';
    height: 0.15em;
    width: 0;
    bottom: 0.01em;
    position: absolute;
    background: #01579B;
    transition: 0.2s ease all;
}
.mdInputBar:before {
    left: 50%;
}
.mdInputBar:after {
    right: 50%;
}
.mdInput > input:focus ~ .mdInputBar:before,
.mdInput > input:focus ~ .mdInputBar:after {
    width: 50%;
}
.mdInput > i.matIcon {
    position: absolute;
    top: 0.35em;
    right: 0;
}
.mdInput > i.matIcon > span.tooltip {
    z-index: 1;
    position: absolute;
    left: 105%;
    border-radius: 0.125em;
    padding: 0.2em;
    background: #E0E0E0;
    font-size: 0.75em;
    opacity: 0;
    transition: 0.2s ease opacity;
}
.mdInput > i.matIcon:hover > span.tooltip {
    opacity: 1;
}


/* Input (DropdownButton) */
.mdDropdownButton {
    position: relative;
    font-size: 1em;
}

/* Select */
.mdSelect > select {
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 0.6em 0.6em 0.6em 0.3em;
    background-color: transparent;
    width: 100%;
    font-size: 1em;
    color: #9E9E9E;
    border: none;
    border-bottom: 1px solid #757575;
}
.mdSelect > select:focus,
.mdSelect > select:valid {
    color: rgba(0, 0, 0, 0.87);
}
.mdSelect > select:focus {
    outline: none;
}

.mdSelect {
    position: relative;
    margin: 1.5em 0.5em 1em;
}
.mdSelect:after {
    position: absolute;
    top: 1em;
    right: 0.5em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: .25em solid transparent;
    border-right: .25em solid transparent;
    border-top: .375em solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
.mdSelectBirthday {
    float: left;
}

/* Button */
.mdInput[type=submit] {
    /*display: inline;*/
    min-width: 5.5em;
    height: 2.25em;
    border-radius: 0.125em;
    border-width: 0em;
    padding: 0em 1em;

    background: rgb(33, 150, 243);
    color: rgba(255, 255, 255, 1);
    font-size: 0.875em;
}
.mdInput[type=submit]:enabled:hover {
    box-shadow: 0em 0.1875em 0.375em rgba(0, 0, 0, 0.16);
}
.mdInput[type=submit]:enabled:focus {
    background: rgb(26, 119, 201);
    outline: none;
}
.mdInput[type=submit]:enabled:active {
    background: rgb(25,118,210);
    box-shadow: 0em 0.1875em 1.5em rgba(0, 0, 0, 0.45);
}
.mdInput[type=submit]:disabled {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.26);
}

/* Flat button */
.mdInput.flat[type=submit] {
    display: inline-block;
    margin: 0.5em;
    min-width: 5.5em;
    height: 2.25em;
    border-radius: 0.125em;
    border-width: 0em;
    padding: 0em 0.5em;

    background: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0.87);
}
.mdInput.flat[type=submit]:enabled:hover,
.mdInput.flat[type=submit]:enabled:focus {
    background: rgba(153, 153, 153, 0.2);
}
.mdInput.flat[type=submit]:enabled:active {
    background: rgba(153, 153, 153, 0.4);
}
.mdInput.flat[type=submit]:disabled {
    background: rgba(0, 0, 0, 0.0);
    color: rgba(0, 0, 0, 0.26);
}

/* List */
ul.mdList {
    padding-top: 0.5em;
    list-style: none;
}
ul.mdList > li {
    padding: 1em;
    height: 5.5em;
}
ul.mdList > li:nth-child(odd) {
    background: #CFD8DC;
}
ul.mdList > li:nth-child(even) {
    background: rgba(0, 0, 0, 0);
}
ul.mdList > li > div:first-child {
    overflow: hidden;
    white-space: nowrap;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.87);
}
ul.mdList > li > div:nth-child(2) {
    padding-top: 0.25em;
    height: 2.75em;
    overflow: hidden;
    font-size: 0.875em;
    color: rgba(0, 0, 0, 0.54);
}

/* Grid list */
div.mdGridList > * {
    display: inline-block;
    /*float: left;*/
    width: 14em;
    height: 14em;
    margin: 0.125em;
    overflow: hidden;
}